<template id="basicManagement-staticDialog">
	<!-- 车辆统计抽屉 -->
	<v-navigation-drawer class="elevation-24 blue-grey lighten-5" v-if="isRequestDrawerShown"
		v-model="isRequestDrawerShown" :permanent="isRequestDrawerShown" fixed temporary right width="90%">
		<v-row class="mt-0 px-4">
			<v-col cols="24">
				<span class="text-subtitle-1 font-weight-medium pa-6 pl-7">粤A123456统计情况</span>
			</v-col>
			<v-col cols="12">
				<!-- 日期选择器部分 -->
				<v-card class="pa-6" elevation="2">
					<v-row>
						<v-col cols="3">
							<v-text-field class="jh-v-input" dense single-line filled label="车牌号"
								v-model="staticItem.carNumber" disabled></v-text-field>
						</v-col>
						<v-col cols="3">
							<v-menu class="jh-v-input" transition="scale-transition" offset-y min-width="auto">
								<template v-slot:activator="{on, attrs}">
									<v-text-field class="jh-v-input" v-bind="attrs" v-on="on"
										v-model="staticItem.startDate" dense single-line filled readonly
										label="开始日期"></v-text-field>
								</template>
								<v-date-picker v-model="staticItem.startDate"></v-date-picker>
							</v-menu>
						</v-col>
						<div style="margin: auto 0">~</div>
						<v-col cols="3">
							<v-menu class="jh-v-input" transition="scale-transition" offset-y min-width="auto">
								<template v-slot:activator="{on, attrs}">
									<v-text-field class="jh-v-input" v-bind="attrs" v-on="on"
										v-model="staticItem.endDate" dense single-line filled readonly
										label="结束日期"></v-text-field>
								</template>
								<v-date-picker v-model="staticItem.endDate"></v-date-picker>
							</v-menu>
						</v-col>
					</v-row>
				</v-card>

				<v-card class="pa-6 mt-6" elevation="2">
					<v-data-table class="fixed-table-height elevation-0 mt-0 mb-xs-4 flex-fill d-flex flex-column"
						fixed-header :headers="headers" :items="tableDataFromBackend"
						:footer-props="{ itemsPerPageOptions: [20, 40, 60, 100, -1], itemsPerPageText: '每页行数', itemsPerPageAllText: '所有'}"
						:items-per-page="20" mobile-breakpoint="0" :loading="isTableLoading" checkbox-color="success"
						:class="{'zebraLine': showTableZebraLine }">
						<template v-slot:footer.prepend="">
							<span class="ml-2 table-search-hint-text">共{{ tableDataFromBackend.length }}条记录</span>
							<v-menu top offset-y :close-on-content-click="false">
								<template v-slot:activator="{ on, attrs }">
									<v-btn v-bind="attrs" v-on="on" icon>
										<v-icon>mdi-menu</v-icon>
									</v-btn>
								</template>
								<v-list>
									<v-list-item>
										<v-switch v-model="showTableZebraLine" label="显示斑马纹" dense flat></v-switch>
									</v-list-item>
								</v-list>
							</v-menu>
						</template>
						<template v-slot:footer.page-text="pagination">
							<span>{{pagination.pageStart}}-{{pagination.pageStop}}</span>
							<span class="ml-1">共{{pagination.itemsLength}}条</span>
						</template>
						<template v-slot:item.filePath="{ item }">
							<v-btn class="elevation-0 mr-2" v-if="item.filePath" color="success" outlined x-small
								@click="filePreview({item})">查看</v-btn>
							<a>{{item.filePath}}</a>
						</template>
						<template v-slot:item.action="{ item }">
							<v-btn class="elevation-0 mr-2" v-for="tableButton of tableButtonList"
								:color="tableButton.color" outlined x-small
								@click="doUiAction(tableButton.action, {item, button: tableButton})">{{ tableButton.text
								}}</v-btn>
						</template>
					</v-data-table>
				</v-card>
			</v-col>
		</v-row>

		<!-- 抽屉关闭按钮 -->
		<v-btn class="drawer-close-float-btn" elevation="0" color="success" fab absolute top left small tile
			@click="doUiAction('close')">
			<v-icon>mdi-close</v-icon>
		</v-btn>
	</v-navigation-drawer>
</template>

<script type="module">
	Vue.component("basicManagement-staticDialog", {
		template: "#basicManagement-staticDialog",
		props: {},
		data: () => ({
			loading: false,
			isRequestDrawerShown: false,
			isTableLoading:false,
			staticItem: {
				carNumber: "粤A123456",
			},
			showTableZebraLine:true,
			tableDataFromBackend: [{
				carId: "CL1001",
				carNumber: "粤A123456",
				mileage: 1000,
				rentDay: 5,
				idleDay: 25,
				rentNum: 1,
				repairNum: 1,
				maintenanceNum: 1,
				violateNum: 1
			}]
		}),
		computed: {
			isMobile() {
				return window.innerWidth < 600;
			},
			headers() {
				return {
					headers: [
						{ text: "汽车编号", value: "carId", width: 120 },
						{ text: "车牌号", value: "carNumber", width: 120 },
						{ text: "总里程数", value: "mileage", width: 120 },
						{ text: "出租天数", value: "rentDay", width: 120 },
						{ text: "闲置天数", value: "idleDay", width: 120 },
						{ text: "出租次数", value: "rentNum", width: 120 },
						{ text: "维修次数", value: "repairNum", width: 120 },
						{ text: "保养次数", value: "maintenanceNum", width: 120 },
						{ text: "违章次数", value: "violateNum", width: 120 },
						{ text: "已收款", value: "receipts", width: 120 },
						{ text: "应收款", value: "receivables", width: 120 },
						{ text: "已付款", value: "payment ", width: 120 },
						{ text: "应付款", value: "payable", width: 120 },
						{ text: "利润", value: "profit", width: 120 },
					],
				};
			},
		},
		watch: {},
		async created() { },
		async mounted() {
			this.staticItem.startDate = this.calculateOneMonthAgo();
			this.staticItem.endDate = dayjs(new Date()).format("YYYY-MM-DD");
		},
		methods: {
			async doUiAction(uiActionId, uiActionData) {
				switch (uiActionId) {
					case "open":
						await this.open(uiActionData);
						break;
					case "close":
						await this.close();
						break;
					default:
						console.error("[doUiAction] uiActionId not find", { uiActionId });
						break;
				}
			},

			async confirmCreateItemDialog() {
				if (
					(await window.confirmDialog({
						title: "新增",
						content: "确定新增吗？",
					})) === false
				) {
					throw new Error("[confirmCreateFormDialog] 否");
				}
			},
			async open(uiActionData) {
				this.isRequestDrawerShown = true;
			},
			async close() {
				this.isRequestDrawerShown = false;
			},
			calculateOneMonthAgo() {
				var currentDate = new Date(); // 获取当前日期
				currentDate.setMonth(currentDate.getMonth() - 1); // 减去一个月
				return dayjs(currentDate).format("YYYY-MM-DD");
			},
		},
	});
</script>